<template>
    <div>
        <div class="container">
            <div class="handle-box">
                <el-button type="primary" class="handle-del mr10" @click="added">新增</el-button>
            </div>
            <el-table :data="tableData" border class="table" ref="multipleTable" element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)"
                v-loading="loading" header-cell-class-name="table-header">
                <el-table-column prop="id" label="ID" align="center"></el-table-column>
                <el-table-column prop="title_one" label="标题一" align="center"></el-table-column>
                <el-table-column prop="title_two" label="标题二" align="center"></el-table-column>
                <el-table-column prop="ss_time" label="时间" align="center"></el-table-column>
                <el-table-column prop="text" label="资质图片" align="center">
                    <template slot-scope="scope">
                        <el-image style="width: 50px; height: 50px"
                            :src="'https://wjapi.surveydiscovery.com' + '/' + scope.row.zz_img"
                            :preview-src-list="['https://wjapi.surveydiscovery.com' + '/' + scope.row.zz_img]"></el-image>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑
                        </el-button>
                        <el-button type="text" icon="el-icon-edit" @click="handledel(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex"
                    :page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
            </div>
        </div>
        <el-dialog :title="type ? '新增资质' : '修改资质'" :visible.sync="AddAuth" width="50%" :close-on-click-modal="false">
            <el-form ref="form" :model="form" label-width="120px">
                <el-form-item label="自定义标题">
                    <el-input v-model="form.title_one"></el-input>
                </el-form-item>
                <el-form-item label="自定义内容">
                    <el-input v-model="form.title_two"></el-input>
                </el-form-item>
                <el-form-item label="时间">
                    <el-date-picker v-model="form.ss_time" value-format="timestamp" align="right" type="date"
                        placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="资质图片">
                    <div style="display: flex;align-items: flex-end;">
                        <el-image style="width: 225px; height: 160px" :src="form.zz_img"
                            :preview-src-list="[form.zz_img]">
                        </el-image>
                        <div>
                            <div>图片大小:225*160</div>
                            <input type="file" accept="image/jpeg,image/jpg,image/gif,image/png,image/bmp"
                                id="cert_file" @change="imgChange1" />
                        </div>
                    </div>
                </el-form-item>
                <el-form-item style="margin-top: 20px">
                    <el-button type="primary" @click="onSubmit">{{ type ? '立即创建' : '立即修改' }}</el-button>
                    <el-button @click="cancellation">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

    </div>
</template>

<script>
import {
    Loading
} from 'element-ui';
import AxiosPost from '../api/index'
import { imgUploads } from "@/api/imgUplpads";

export default {
    name: 'BannerList',
    data() {
        return {
            type: false,
            AddAuth: false,
            loading: true,
            tableData: [],
            imageUrl: '',
            Token: '',
            query: {
                pageIndex: 1,
                pageSize: 10
            },
            pageTotal: 0,
            form: {
                id: '',
                title_one: '',
                title_two: '',
                ss_time: '',
                zz_img: '',
            },
        };
    },
    created() {
        this.getData();

    },
    methods: {
        imgChange1(e) {
            const _this = this
            this.files1 = null
            this.files1 = e.target.files[0]
            console.log(e);
            let reader = new FileReader();
            reader.onload = function (e) { // 文件读取成功完成后的处理
                _this.form.zz_img = e.target.result;
            };
            reader.readAsDataURL(this.files1);

        },
        sendFormData(formData) {
            const _this = this
            const xhr = new XMLHttpRequest();
            xhr.open('POST', 'https://wjapi.surveydiscovery.com/shop_set/savezzzs', true);
            xhr.setRequestHeader('authorization', "Bearer " + localStorage.getItem("uid") + "." + localStorage.getItem("token"));
            xhr.onreadystatechange = function () {
                if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
                    // 上传成功处理逻辑
                    console.log('上传成功');
                    _this.getData()
                }else{

                }
            };
            xhr.send(formData);
        },
        async getQiniuToken() {
            let info = await AxiosPost('/admin/login/qiniutoken', { scope: this.$store.state.scope_img })
            this.Token = info.data
        },
        async uplImage(file) {
            await this.getQiniuToken();
            let aa = await imgUploads(this.Token, this.$store.state.upload_qiniu, this.$store.state.banner_url, file.raw);
            if (aa.status === 1) {
                this.form.banner_url = aa.file;
                this.imageUrl = this.$store.state.show_qiniu_img + '/' + aa.file;
            } else if (aa.status === 2) {
                this.$message.error(aa.msg)
                this.$refs.upload.clearFiles();
            }
        },
        added() {
            this.form = {
                id: '',
                title_one: '',
                title_two: '',
                ss_time: '',
                zz_img: '',
            }
            this.type = true
            this.AddAuth = true
        },
        async getData() {
            this.loading = true
            let info = await AxiosPost('/admin/shop_set/zzzslist', this.query)
            if (info.code !== 10000) {
                this.$message.error(info.message)
                return false
            }
            this.loading = false
            info.data.list.forEach(item => {
                item.ss_time = this.$moment(item.ss_time * 1000).format('YYYY-MM-DD')
            })
            this.tableData = info.data.list
            this.pageTotal = info.data.meta.total;
        },

        cancellation() {
            this.AddAuth = false
        },
        async onSubmit() {
            const _this = this
            const loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            if(!this.files1){
                this.$message.error('提交失败')
                loading.close();
                return false
            }
            const formData = new FormData();
            formData.append('id', this.form.id);
            formData.append('title_one', this.form.title_one);
            formData.append('title_two', this.form.title_two);
            formData.append('ss_time', this.form.ss_time / 1000);
            formData.append('zz_img', this.files1);
            // 执行上传操作
            const xhr = new XMLHttpRequest();
            xhr.open('POST', 'https://wjapi.surveydiscovery.com/shop_set/savezzzs', true);
            xhr.setRequestHeader('authorization', "Bearer " + localStorage.getItem("uid") + "." + localStorage.getItem("token"));
            xhr.onreadystatechange = function () {
                if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
                    // 上传成功处理逻辑
                    loading.close();
                    _this.AddAuth = false
                    _this.$message.success(info.message)
                } else {
                    this.$message.error(info.message)
                    return false
                }
            };
            xhr.send(formData);
            setTimeout(()=>{
                _this.getData()  
            },500)
        },
        handlePageChange(val) {
            this.$set(this.query, 'pageIndex', val);
            this.getData();
        },
        // 编辑操作
        handleEdit(index, row) {
            this.form.id = row.id
            this.form.title_one = row.title_one
            this.form.title_two = row.title_two
            this.form.ss_time = new Date(row.ss_time)
            this.form.zz_img = 'https://wjapi.surveydiscovery.com' + '/' + row.zz_img
            this.type = false
            this.AddAuth = true
        },
        handledel(index, row) {
            this.$confirm('此操作将会删除资质, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let info = await AxiosPost('/admin/shop_set/savezzzs', {
                    id: row.id,
                    if_del: 1
                })
                if (info.code !== 10000) {
                    this.$message.error(info.message)
                    return false
                } else {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getData()
                }

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
    }
};
//时间戳转换
</script>

<style>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}

.table {
    width: 100%;
    font-size: 14px;
}

.red {
    color: #ff0000;
}

.mr10 {
    margin-right: 10px;
}

.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
